<template>
    <div id='black-list'>
        <div class="search-box" v-show='searchFixed'>
            <div class="search">
                <img src="../images/search_small.png">
                <div class='input'>
                    <input type="text" placeholder="输入名字、电话、微信号、支付宝账号" v-model='searchText'>
                    <div class="iconfont icon-close" v-show='searchText' @click='searchText = ""'></div>
                    <div class="button pure auto" v-show='searchText' @click='searchList'>搜索</div>
                </div>
            </div>
        </div>
        <div class="black-list-wrapper wrapper" ref='content'>
            <div class="scroll-box">
                <div class="header">
                    <p>可疑账户和违反风控账户<br>公示名单</p>
                    <div class="search">
                        <img src="../images/search_small.png">
                        <div class='input'>
                            <input type="text" placeholder="输入名字、电话、微信号、支付宝账号" v-model='searchText'>
                            <div class="iconfont icon-close" v-show='searchText' @click='searchText = ""'></div>
                            <div class="button pure auto" v-show='searchText' @click='searchList'>搜索</div>
                        </div>
                    </div>
                </div>
                <div class="black-list-all" v-show='show_allList'>
                    <div class="tips">
                        <p>为保障借款人的安全，安牛有借会定期进行账户风险排查，并接受用户举报，可疑账户和违反平台风控账户将被冻结并公示，谨防诈骗。</p>
                        <div class="important">
                            <h1>安牛有借再次重申</h1>
                            <p>任何以审核费、资料包装费、保证金等名义收取前期费用的，均为诈骗。</p>
                        </div>
                        <div class="report-tel">
                            <p class="text"><span>举报电话</span></p>
                            <a class="number" href='tel:0571-87098933'>0571-87098933</a>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item" v-for='(item,index) in blacklistRecords' :class='{gray:index%2 == 1}'>
                            <img :src="item.avatar" class="left">
                            <div class="right">
                                <div class="info">
                                    <div class="info-item">
                                        <p>{{item.beReportedUserName}}</p>
                                    </div>
                                    <div class="info-item">
                                        <p v-for='item in item.beReportedUsermobile'>{{item}}</p>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="info-item">
                                        <p class='gray'>常用微信</p>
                                        <p v-for='item in item.weixin'>{{item}}</p>
                                    </div>
                                    <div class="info-item">
                                        <p class='gray'>支付宝账号</p>
                                        <p v-for='item in item.zhifubao'>{{item}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show='!lastPage' class='all-list-loading'><loading :size='12'></loading></div>
                    <div class="user-list-explain" v-if='!loading_allList && lastPage'>没有更多了～</div>
                </div>
                <div class="search-list" v-show='!show_allList'>
                    <div class="no-records" v-if='!loading_searchList && searchListRecords.length'>
                        <p class='font-body1'>以下为“{{searchText}}”的查询结果</p>
                    </div>
                    <div class="list">
                        <div class="item" v-for='(item,index) in searchListRecords' :class='{gray:index%2 == 0}'>
                            <img src="" alt="" class="left">
                            <div class="right">
                                <div class="info">
                                    <div class="info-item">
                                        <p>{{item.beReportedUserName}}</p>
                                    </div>
                                    <div class="info-item">
                                        <p v-for='item in item.beReportedUsermobile'>{{item}}</p>
                                    </div>
                                </div>
                                <div class="info">
                                    <div class="info-item">
                                        <p class='gray'>常用微信</p>
                                        <p v-for='item in item.weixin'>{{item}}</p>
                                    </div>
                                    <div class="info-item">
                                        <p class='gray'>支付宝账号</p>
                                        <p v-for='item in item.zhifubao'>{{item}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show='loading_searchList' class='all-list-loading'><loading :size='12'></loading></div>
                    <div class="no-records" v-if='!loading_searchList && !searchListRecords.length'>
                        <p class='font-body1'>无“{{searchText}}”的查询结果</p>
                        <p class='font-caption'>查询结果仅基于安牛有借平台数据，仍需警惕借贷风险。</p>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import checkBox from '../components/CheckBox.vue'
    import loading from '../components/Loading.vue'
    import { allApi } from '../api/api'
    import { getOS, scrollLoading, scrollLoadingOff } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            loading,
            radio,
            checkBox
        },
        data() {
            return {
                isWeb:process.env.NODE_ENV == 'web',
                os:getOS(),
                searchText:'',
                searchFixed:false,
                show_allList:true,
                loading_allList:false,
                loading_searchList:false,
                blacklistInfo:{},
                blacklistRecords:[],
                blackListCurNum:'',
                searchListInfo:{},
                searchListRecords:[],
                searchListCurNum:'',
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            lastPage(){
                if(!this.blacklistInfo.pageNum){
                    return false
                }
                return this.blacklistInfo.pageNum == this.blacklistInfo.totalPage
            },
            admin(){
                return this.localInfo.admin
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            needLogin(){
                return this.localInfo.needLogin
            },
            routerAnimation(){
                return this.localInfo.routerAnimation
            },
            routerAnim(){
                if(this.os == 'Android'){
                    return ''
                }
                if(this.os != 'Android'){
                    return this.routerAnimation
                }
            },
            routerMode(){
                if(this.os == 'Android'){
                    return 'out-in'
                }
                if(this.os != 'Android'){
                    return ''
                }
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            currentRouter(item){
                let routerArr = this.$route.matched
                let matchRouter = _.some(routerArr,['name',item.router])
                return matchRouter
            },
            searchList(){
                this.show_allList = false
                this.searchListRecords = []
                this.loading_searchList = true
                allApi.blacklist({
                    searchWord:this.searchText,
                    pageSize:100,
                    pageNo:1
                })
                .then(result=>{
                    this.searchListInfo = result
                    this.searchListRecords = result.records
                    this.searchListCurNum = result.pageNum
                    this.loading_searchList = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_searchList = false
                })
            },
            goRouter(item,isSub){
                let thisRouter
                let routers = item.subRouters

                if(isSub === 'sub'){
                    if(this.$route.name == item) return
                    this.$router.push(item)
                    return
                }

                if(routers.length > 1){
                    item.opened = !item.opened
                    return
                }

                thisRouter = routers[0]
                if(this.$route.name == thisRouter.name) return
                this.$router.push(thisRouter)
            },
            goLogin(){
                this.setSessionId('')
                this.$router.push({
                    name:'login'
                })
            },
            getList(){
                this.loading_allList = true

                allApi.blacklist({
                    pageSize:20,
                    pageNo:this.blackListCurNum
                })
                .then(result=>{
                    this.blacklistInfo = result
                    if(result.records){
                        this.blacklistRecords = _.concat(this.blacklistRecords, result.records)
                    }
                    this.blackListCurNum = result.pageNum
                    this.loading_allList = false
                })
                .catch(error => {
                    console.error(error)
                    this.loading_allList = false
                })
            },
        },
        created(){
            this.getList()
            this.$nextTick(()=>{
                scrollLoading('.black-list-wrapper','.scroll-box',()=>{
                    if(!this.show_allList || this.lastPage) return
                    this.blackListCurNum = this.blackListCurNum + 1
                    this.getList()
                },110)

                $('.black-list-wrapper').on('scroll.fixed',()=>{
                    if($(this.$refs.content).scrollTop() > 170){
                        this.searchFixed = true
                    }
                    else{
                        this.searchFixed = false
                    }
                })
            })
        },
        destroyed(){
            scrollLoadingOff('.scroll-box')
            scrollLoadingOff('.scroll.fixed')
        },
        watch: {
            'searchText'(newVal,oldVal){
                if(newVal == '') {
                    this.show_allList = true
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #black-list{
        background-color: #fff;
        .wrapper{
            z-index:1;
        }
        .search-box{
            position: absolute;
            left:0;
            top:0;
            right:0;
            z-index:2;
            background-color: #fff;
            box-shadow:0 0 8px 2px $sectionColor;
            .search{
                margin:0 10px;
            }
        }
        .search{
            margin:16px 24px;
            background-color: #fff;
            border-radius:2px;
            text-align: left;
            position: relative;
            img{
                position: absolute;
                top:50%;
                width: 18px;
                height: 18px;
                margin-top: -9px;
                left: 8px;
            }
            .input{
                position: relative;   
                width: 100%;
                .button{
                    position: absolute;
                    right:0;
                    top:50%;
                    transform:translate(0,-50%);
                    padding: 0 16px;
                }
                .icon-close{
                    position: absolute;
                    z-index:2;
                    text-align: center;
                    right:55px;
                    top:50%;
                    color:$sectionColor;
                    font-size: 20px;
                    width: 30px;
                    height: 20px;
                    line-height: 20px;
                    margin-top:-10px;
                }
            }
            input{
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding: 10px 10px 10px 30px;
                @extend %font-caption;
            }
        }
        .header{
            font-size: 24px;
            line-height: 32px;
            text-align: center;
            color:#fff;
            font-weight: normal;
            padding:24px 0 0 0;
            background: url(../images/bg_announce@3x.png) no-repeat center center;
            background-size: 100% auto;
            overflow:hidden;
        }
        .tips{
            background-color: #FBE9E7; 
            padding: 16px 24px;
            p{
                @extend %font-caption;
                a{
                    color:$importColor;
                }
            }
        }
        .important{
            position: relative;
            h1{
                @extend %font-body2;
                position: absolute;
                padding: 0 16px;
                top:-10px;
                left:50%;
                transform:translate(-50%,0);
                background-color: #FBE9E7;
            }
            margin-top: 26px;
            border:1px solid $red;
            color:$red;
            padding: 16px 16px 8px 16px;
        }
        .list{

        }
        .item{
            display: flex;
            padding: 16px;
            @extend %font-caption;
            background-color: #fff;
            color:$importColor;
            &.gray{
                background-color: $backgroundColor;
            }
        }
        .left{
            display: block;
            width: 32px;
            height: 32px;
            border-radius:50%;
            margin-right: 16px;
        }
        .right{
            flex:1;
        }
        .info{
            overflow:hidden;
            border-bottom: 1px solid $sectionColor;
            padding-bottom: 8px;
            &:last-child{
                padding-bottom: 0;
                padding-top: 8px;
                border-bottom: none;
            }
        }
        .info-item{
            width: 50%;
            float:left;
            .gray{
                color:$defaultColor;
            }
        }
        .report-tel{
            padding-top: 16px;
            text-align: center;
            .text{
                position: relative;
                span{
                    @extend %font-caption;
                    display: inline-block;
                    background-color: #FBE9E7;
                    padding: 0 16px;
                    position: relative;
                    z-index:2;
                }
                &:after{
                    content:'';
                    position: absolute;
                    top:50%;
                    border-top: 1px solid $sectionColor;
                    left: 0;
                    right: 0;
                }
            }
            .number{
                @extend %font-body2;
                text-align: center;
            }
        }
        .no-records{
            text-align: left;
            padding: 16px;
            padding-left: 24px;
            padding-right: 11px;
            .font-body1{
                color:$importColor;
            }
            .font-caption{
                padding-top: 8px;
            }
        }
    }
</style>
